{% extends '_base_list.html' %}

{% block title %}
    作业中心
{% endblock %}


{% block top_css %}
    {{ super() }}
    <!--bees-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bees.css') }}">

    <style>

        #adhocTable  a:hover {
            text-decoration:underline;
        }

    </style>

{% endblock %}


<!-- Content head -->
{% block head_title %}
    作业中心
{% endblock %}
{% block head_nav %}
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-home"></i></a></li>
        <li><a href="#">作业任务</a></li>
        <li class="active">任务列表</li>
    </ol>
{% endblock %}


<!-- Content body -->
{% block title_filter %}
    <div class="filter">
        <div class="row">
            <div class="col-xs-12 col-sm-2">
                <div class="form-group">
                    <input type="text" class="form-control" name="create_time" placeholder="请选择日期日期" autocomplete="off">
                </div>
            </div>
            <div class="col-xs-6 col-sm-2">
                <div class="form-group">
                    <select class="select2 form-control" name="task" data-placeholder="任务名称">
                    </select>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block body_operator %}
{% endblock %}

{% block body_table %}
    <table id="adhocTable" class="table table-auto"></table>
{% endblock %}


{% block buttom_js %}
    {{ super() }}
    <!--bees-->
    <script src="{{ url_for('static', filename='js/bees.js') }}"></script>

    <script type="text/javascript">

        $(function () {
            bees.initServerSideSelect2(
                $('select[name="task"]'),
                {url: '{{ url_for('ops.api-task-list') }}'}
            );

            bees.initDaterangepicker($('input[name="create_time"]'),{
                opens: "right",
                timePicker: false,
                timePickerSeconds: false,
                singleDatePicker: false,
                locale: {
                    format: 'YYYY-MM-DD'
                }
            });

            // 回填和初始化默认过滤参数
            var createTimeEle = $("input[name='create_time']");
            var taskEle = $("select[name='task']");

            var filterParams = JSON.parse(window.sessionStorage.getItem("filterParams"));
            if(filterParams){
                // 回填表单过滤条件
                createTimeEle.val(filterParams.create_time);
                bees.select2DataEcho(
                    taskEle,
                    {
                        url: '{{ url_for('ops.api-task-list') }}',
                        selected: [filterParams.task],
                        async: false    // 只能通过同步的方式
                    }
                );

                window.sessionStorage.removeItem("filterParams");
            }else {
                // 默认表单过滤条件
                var taskVal = '{{ task }}';
                if(!taskVal){
                    taskVal = taskEle.val();
                }
                filterParams = {
                    'create_time': createTimeEle.val(),
                    'task': taskVal
                };
            }
            $.fn.beesTable.defaultFilterParams(filterParams);

            // 初始化表格
            var $tableEle = $("#adhocTable");
            var options = {
                columns: [
                    {title: '选择', field: 'selected', radio: true},
                    {title: '任务名称', field: 'task_name', sortable: false,
                        formatter: function (value, row, index, field) {
                             return '<a href="{{ url_for("ops.history-list") }}?adhoc='+row.id+'">'+value+'</a>'
                         }
                    },
                    {title: '执行任务', field: 'tasks', sortable: false, align: 'left', valign: 'middle'},
                    {title: '执行主机', field: 'hosts', sortable: false, align: 'left', valign: 'middle'},
                    {title: '创建时间', field: 'create_time', sortable: true}
                ],
                url:'{{ url_for("ops.api-adhoc-list") }}',
                sortName: 'create_time',
                sortOrder: 'desc'
            };
            var table = $tableEle.beesTable(options);


            // 搜索
            bees.bindTableSearch({
                table: $tableEle,
                searches: [
                    {eventType:'change', eventSource:createTimeEle, data:function () {
                            return {'create_time': createTimeEle.val()};
                        }
                    },
                    {eventType:'change', eventSource:taskEle, data: function () {
                            return {'task': taskEle.select2("val")}
                        }
                    }
                ]
            });


        })
    </script>
{% endblock %}
